<template>
  <section>
    <div style="text-align: center;">
      <el-row :gutter="20">
        <el-col :span="11">
          <div class="floor1 v-center">
            <div class="boxs All-center">
              <div class="blueContent"></div>
            </div>
            <span class="grayFont choice">待选择列表</span>
            <div class="countDiv grayFont">{{ 9 }}</div>
          </div>
          <el-input
            v-model="IP"
            suffix-icon="el-icon-search"
            size="mini"
          ></el-input>
          <hk-table
            ref="staffTable"
            :loading="listLoading"
            :tableData="staffList"
            :tableColumns="tableList"
            :selection="true"
            :total="total"
            :showIndex="true"
            :queryParams="queryParams"
            @handleSelectionChange="handleStaffChange"
            @changePage="getList"
          >
          </hk-table>
        </el-col>
        <el-col :span="1">
          <div class="center">
            <el-button
              type="primary"
              icon="el-icon-arrow-right"
              class="takeBtn"
              @click="addStaff"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              class="takeBtn"
              @click="removeStaff"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="floor1 v-center">
            <div class="boxs All-center">
              <div class="blueContent"></div>
            </div>
            <span class="grayFont choice">已选择列表</span>
            <div class="countDiv grayFont">{{ 9 }}</div>
          </div>
          <el-input v-model="IP" suffix-icon="el-icon-search" size="mini">
          </el-input>
          <hk-table
            ref="selectedStaffTable"
            :loading="listLoading"
            :tableData="selectedStaffList"
            :tableColumns="tableList"
            :selection="true"
            :showIndex="true"
            @handleSelectionChange="handleSelectedStaffChange"

          >
          </hk-table>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
  

<script>
import HkTable from "../../HKTable/index.vue";
export default {
  data() {
    return {
    total:0,
      IP: "",
      delList: [],
      lists: JSON.parse(sessionStorage.getItem("lists"))
        ? JSON.parse(sessionStorage.getItem("lists"))
        : [],
      tradesList: [],
      tradeSonList: [],
      labelTypeList: [],
      secLabelList: [],
      ids: [],
      staffTemp: {},
      staffList: [],
      selectedStaffList: [],
      staffData: [],
      selectedStaffData: [],
      tableKey: 0,
      rowKey: "rowKey",
      listLoading: false,
      searchDate1: [-1, -1],
      remitDate: "",
      radioMusic: 1,
      remark: "",
      updateMusic: "",
      selectName: true,
      changeSecName: 0,
      pattern: 0,
      aisle: 0,
      siteForm: {
        itemModel: 0,
        types: 0,
      },
      sels: [],
      queryParams: {},
    };
  },
  props: {
    tableList: {
      type: Array,
      default:()=>[] 
    },
  },
  methods: {
    //我看到elementUI上说这个是必须的，好像是这样的，不写就会报错，说RowKey有问题。。
    getRowKeys(row) {
      // 行数据的Key
      return row.id;
    },
    getRowKeys2(row) {
      // 行数据的Key
      return row.id;
    },
    // 获取搜索列表（左边表格数据）
    getList(val) {
      this.queryParams = { ...this.queryParams, ...val };
      musicBeforeEditApi(this.queryParams).then((res) => {
        if (res.data.result == 0) {
          this.staffList = res.data.data.list;
          this.delList = [];
          // console.log(res.data);
        } else {
          Message.error(res.data.msg);
        }
      });
    },
    // 将左边表格选择项存入staffData中
    handleStaffChange(rows) {
      this.staffData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.staffData.push(row);
          }
        });
      }
    },
    // 左边表格选择项移到右边
    addStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      let repeat = false;
      this.selectedStaffList.forEach((item) => {
        if (
          this.staffData[0] &&
          item.musicUuid === this.staffData[0].musicUuid
        ) {
          repeat = true;
          Message.error("此音乐已添加");
          return;
        }
      });
      if (repeat === false) {
        this.staffData.forEach((item) => {
          this.selectedStaffList.push(item);
        });
        for (let i = 0; i < this.staffList.length; i++) {
          for (let j = 0; j < this.staffData.length; j++) {
            if (
              this.staffList[i] &&
              this.staffData[j] &&
              this.staffList[i].musicUuid === this.staffData[j].musicUuid
            ) {
              this.staffList.splice(i, 1);
            }
          }
        }
      }
    },
    // 右边表格选择项移到左边
    removeStaff() {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      this.selectedStaffData.forEach((item) => {
        this.staffList.push(item);
      });
      for (let i = 0; i < this.selectedStaffList.length; i++) {
        for (let j = 0; j < this.selectedStaffData.length; j++) {
          if (
            this.selectedStaffList[i] &&
            this.selectedStaffData[j] &&
            this.selectedStaffList[i].phone === this.selectedStaffData[j].phone
          ) {
            this.selectedStaffList.splice(i, 1);
          }
        }
      }
    },
    // 将右边表格选择项存入selectedStaffData中
    handleSelectedStaffChange(rows) {
      this.selectedStaffData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.selectedStaffData.push(row);
          }
        });
      }
    },
    // 提交（没有写提交功能，可不用）
    modifyStaff() {
      let isEmpty = false;
      this.selectedStaffList.forEach((item) => {
        if (!item.staffTypeId) {
          alert("请选择类型");
          isEmpty = true;
          return;
        }
      });
      if (isEmpty === false) {
        editStaff(this.selectedStaffList, this.deviceQuery.id).then((res) => {
          this.staffListVisible = false;
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
        });
      }
    },
    // 删除
    handleDel(index, row) {
      this.delList.push(row);
      this.staffList.splice(index, 1);
      // console.log(this.delList,this.staffList)
    },
    // 恢复
    handleRecover(index, row) {
      this.staffList.push(row);
      this.delList.splice(index, 1);
    },
  },
  components: { HkTable },
};
</script>

<style lang="scss" scoped>
.el-row {
  display: flex;
}
.el-col {
  // border: 1px solid #c8cbcd;
  // margin: 20px 10px;
}
.v-center {
  display: flex;
  align-items: center;
}
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.All-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice {
  margin-left: 8px;
}
.grayFont {
  font-size: 14px;
  color: #95989c;
}
.countDiv {
  margin-left: auto;
  margin-right: 12px;
}
.takeBtn {
  margin: 0 0 4px 0;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
}
.floor1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #c8cbcd;
  padding-left: 12px;
  margin-bottom: 10px;
  .boxs {
    height: 16px;
    width: 16px;
    border: 1px solid #d9d9d9;
    .blueContent {
      height: 6px;
      width: 6px;
      background-color: #2979ff;
    }
  }
}
</style>